<template>
  <div class="elcker-inter-login-main">
    <div class="elcker-inter-login-main-center">
      <el-card shadow="always">
        <el-row :gutter="2">
          <el-col class="elcker-inter-login-main-center-right" :span="24">
            <el-form :rules="userFormrules" ref="userForm" status-icon :model="userFormDatas">
              <el-row class="elcker-inter-login-main-center-col">
                <el-col :span="24">
                  <el-divider>
                    <span style="font-size: 24px; font-weight: bold; letter-spacing: 3px"> 用户登录 </span>
                  </el-divider>
                  <span class="elcker-inter-login-main-center-col-form-spanmsg">{{ appMessage }}</span>
                </el-col>
                <el-col :span="24">
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-form-item prop="username">
                      <el-input placeholder="请输入用户名" clearable v-model="userFormDatas.username" name="用户名" />
                    </el-form-item>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-form-item prop="password">
                      <el-input placeholder="请输入密码" v-model="userFormDatas.password" show-password name="密码" />
                    </el-form-item>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span01">
                    <el-checkbox v-model="userFormDatas.remembedMe">记住我 </el-checkbox>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-button
                      class="elcker-inter-login-main-center-col-form-subbut"
                      type="success"
                      v-if="!submitStatu"
                      @click="onSubmit"
                      >登录
                    </el-button>
                    <el-button class="elcker-inter-login-main-center-col-form-subbut" type="warning" v-else
                      >登录中...
                    </el-button>
                  </span>
                </el-col>
                <el-col :span="24">
                  <el-divider>
                    <span style="letter-spacing: 4px; color: #666"> 协议许可 </span>
                  </el-divider>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-link type="primary">查看用户协议说明</el-link>
                  </span>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
  import { elckerAuthStoreOutside } from '@/store/modules/ElckerAuth';
  export default {
    data() {
      const validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (this.userFormDatas.username !== '') {
            this.$refs.userForm.validateField('username');
          }
          callback();
        }
      };
      const validatePass = (rule, value, callback) => {
        const reg = /^[a-zA-Z]\w{8,18}$/;
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (!reg.test(value)) {
          callback(new Error('密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线'));
        } else {
          if (this.userFormDatas.password !== '') {
            this.$refs.userForm.validateField('password');
          }
          callback();
        }
      };
      return {
        appMessage: '',
        submitStatu: false,
        jumpPath: import.meta.env.VITE_PAGE_HOME,
        userFormDatas: {
          username: 'admin',
          password: 'Abc123456',
          remembedMe: false,
        },
        userFormrules: {
          username: [{ validator: validateUserName, trigger: 'blur' }],
          password: [{ validator: validatePass, trigger: 'blur' }],
        },
      };
    },
    mounted() {
      // this.onSubmit();
    },
    methods: {
      onSubmit() {
        if (this.submitStatu) {
          return false;
        }
        // 1.设置不能重复点击
        this.submitStatu = true;
        this.$refs.userForm.validate(valid => {
          if (valid) {
            const authStore = elckerAuthStoreOutside();
            authStore
              .UserLogin(this.userFormDatas)
              .then(() => {
                // 跳转回来源页面
                //this.$route.params.redirect
                this.$router.push(this.jumpPath);
                this.submitStatu = false; // 提交完
              })
              .catch(error => {
                this.submitStatu = false; // 提交完
                this.loginMessage = '系统繁忙，请稍后重试' + error;
              });
          } else {
            this.submitStatu = false;
            return false;
          }
        });
      },
    },
  };
</script>

<style scoped>
  .elcker-inter-login-main {
    width: 100%;
    height: 100%; /* 写给不支持calc()的浏览器 */
    height: -moz-calc(100vh);
    height: -webkit-calc(100vh);
    height: calc(100vh);
    background: url('../assets/login/loginbg.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .elcker-inter-login-main-center {
    position: absolute;
    width: 36%;
    width: -moz-calc(360vw);
    width: -webkit-calc(36vw);
    width: calc(36vw);
    height: 60%;
    height: -moz-calc(60vh);
    height: -webkit-calc(60vh);
    height: calc(60vh);
    margin-top: calc(15vh);
    margin-left: calc(60vw);
  }

  .el-card {
    width: 100%;
    height: 100%;
  }

  .elcker-inter-login-main-center-right {
    padding-top: 15px;
  }

  .elcker-inter-login-main-center-col {
    width: 78%;
    margin: 10% auto;
  }

  .elcker-inter-login-main-center-col-form-spanmsg {
    display: block;
    width: 90%;
    font-size: 13px;
    color: red;
    text-align: center;
  }

  .elcker-inter-login-main-center-col-form-span {
    display: block;
    width: 84%;
    padding: 10px 8%;
    text-align: center;
  }

  .elcker-inter-login-main-center-col-form-span01 {
    display: block;
    width: 80%;
    padding: 0 10%;
  }

  .elcker-inter-login-main-center-col-form-subbut {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
  }
</style>
